<template>
  <div id="app">
    <div data-v-ac4e4544="">
      <!---->
      <div data-v-ac4e4544="" class="mint-popup popup" style="display: none">
        <div data-v-ac4e4544="" class="popup-close">
          <img
            data-v-ac4e4544=""
            src="https://images.yaodouwang.com/img/common/popup_close.png"
            alt="关闭"
          />
        </div>
        <div data-v-ac4e4544="" class="popup-content">
          <div data-v-ac4e4544="" class="popup-img">
            <img
              data-v-ac4e4544=""
              src="https://images.yaodouwang.com/img/common/ewm.png"
              alt="二维码"
            />
          </div>
        </div>
      </div>
    </div>
    <!---->
    <div data-v-0a21a2fa="" class="group-buy">
      <div data-v-0a21a2fa="" class="classify-header" style="top: 0px">
        <div data-v-0a21a2fa="" class="search-warp">
          <div data-v-0a21a2fa="" class="search-box">
            <input
              v-model="intmsg"
              data-v-0a21a2fa=""
              type="text"
              placeholder="请输入药品、症状、品牌"
              class="search"
            />
            <div data-v-0a21a2fa="" class="close"><!----></div>
          </div>
          <span data-v-0a21a2fa="" class="btn" @click="historyAdd(intmsg)">{{
            intmsg ? "搜索" : "取消"
          }}</span>
        </div>
        <div data-v-0a21a2fa="" class="sort-btn color-333 font-px28">
          <div
            data-v-0a21a2fa=""
            :class="checknum == 0 ? 'sort-btn-active' : ''"
            @click="handSelect(0)"
          >
            默认
          </div>
          <div
            data-v-0a21a2fa=""
            :class="checknum == 1 ? 'sort-btn-active' : ''"
            @click="handSelect(1)"
          >
            销量
          </div>
          <div
            data-v-0a21a2fa=""
            :class="checknum == 2 ? 'sort-btn-active' : ''"
            @click="handSelect(2)"
          >
            <div data-v-0a21a2fa="" class="sort-btn-price">
              <div data-v-0a21a2fa="">价格</div>
              <div data-v-0a21a2fa="" class="sort-btn-sanjiao">
                <i
                  data-v-0a21a2fa=""
                  :class="[
                    'iconfont',
                    'icon-sanjiaoshang',
                    { 'price-active': !pricecount && checknum == 2 },
                  ]"
                >
                </i>
                <i
                  data-v-0a21a2fa=""
                  :class="[
                    'iconfont',
                    'icon-sanjiaoxia',
                    { 'price-active': pricecount && checknum == 2 },
                  ]"
                >
                </i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <div data-v-0a21a2fa="" class="mescroll" style="top: 0px">
        <div data-v-0a21a2fa="" class="is-ysk" style="">
          <button 
          @click="handleScreen()"
          v-if="isScreen"
          data-v-0a21a2fa="" 
          class="is-ysk-button">
            点击筛选<span data-v-0a21a2fa="" class="is-ysk-button_text"
              >药神卡</span
            >可用商品
          </button>
          <button
            @click="handleScreen()"
            v-else
            data-v-0a21a2fa=""
            class="is-ysk-button2"
          >
            <span data-v-0a21a2fa="">以下是药神卡可用商品</span
            ><span data-v-0a21a2fa="" class="is-ysk-button_text">取消</span>
          </button>
        </div>
        <div data-v-0a21a2fa="" class="groupBuy-list" style="padding-top: 0px">
          <div
            data-v-4fc4293a=""
            data-v-0a21a2fa=""
            class="product-list_item"
            stocknumber="1"
            v-for="(item, index) in lists"
            :key="index"
            @click="linkToDetail(item.productId)"
          >
            <div data-v-4fc4293a="" class="product-img">
              <!---->
              <!---->
              <img
                data-v-4fc4293a=""
                alt="商品图片"
                data-src="https://ydw-b2c.oss-cn-beijing.aliyuncs.com/20200608/2a04a7fae3f34899be5f20a07f06a89f.png?x-oss-process=image/resize,m_mfit,h_346,w_346/format,jpg"
                :src="item.imageUrl"
              />
              <!---->
            </div>
            <div data-v-4fc4293a="" class="product-info">
              <div
                data-v-4fc4293a=""
                class="product-name txt-cut color-333 font-px26"
              >
                <span data-v-4fc4293a="">{{ item.productName }}</span>
              </div>
              <div data-v-4fc4293a="" class="product-tag">
                <div data-v-4fc4293a="" class="yskMake" v-if="item.labels.useHealthyCard=='Y'">药神卡</div>
                <div data-v-4fc4293a="" class="quan" v-if="item.quan=='Y'">
                  <img
                    data-v-4fc4293a=""
                    src="https://images.yaodouwang.com/img/home/tag_coupon.png"
                    alt="券"
                  />
                </div>
              </div>
              <div data-v-4fc4293a="" class="product-price">
                <div data-v-4fc4293a="" class="product-price-left">
                  <div
                    data-v-d4462b7e=""
                    data-v-4fc4293a=""
                    class="money_show"
                    fontcolor="#FF7900"
                  >
                    <span data-v-d4462b7e="" class="now_money"
                      ><span data-v-d4462b7e=""
                        ><span data-v-d4462b7e="" class="font-px28">¥</span
                        ><span data-v-d4462b7e="" class="font-px38"
                          >{{ handInt(item.pcPrice)
                          }}<span data-v-d4462b7e="" class="font-px26">{{
                            handFloat(item.pcPrice)
                          }}</span></span
                        ></span
                      ></span
                    >
                  </div>
                </div>
                <div 
                @click.stop="handleCartAdd(item)"
                data-v-cdd5d3c4="" data-v-4fc4293a="" class="cart-icon">
                  <img
                    data-v-cdd5d3c4=""
                    src=""
                    alt="加购物车"
                  />
                </div>
              </div>
              <!---->
            </div>
          </div>
        </div>
        <div data-v-0a21a2fa="" class="viewMore"></div>
        <div
          class="mescroll-upwarp mescroll-hardware"
          style="visibility: visible; display: block"
        >
          <p id="downTip" class="productDisplay-mescroll">—— 已经到底了 ——</p>
        </div>
      </div>
      <!---->
      <router-link data-v-3f9a8470="" class="shopCart" tag="div" to="/cart">
        <div
          data-v-3f9a8470=""
          class="shopCart-num1"
          v-if="countTotal.countQuantity > 0"
        >
          {{ countTotal.countQuantity }}
        </div>
      </router-link>
    </div>
    <!---->
  </div>
</template>
<script>
import request from "../utils/request.js";
import {cartAdd} from "../api/pjmedicinecard"; 
import { ownCartList } from "../api/pjmedicinecart";
import {noScreenList,screenList,noRankList,rankList} from "../api/ljbmdeicine"
export default {
  data() {
    return {
      intmsg: "", //搜索框
      lists: [],
      num: 0,
      checknum: 0,
      pricecount: true,
      isshow: true,
      oldUrl: "", //上一个页面的路径
      isScreen:true,//点击筛选药神卡
    };
  },
  computed: {
    countTotal() {
      //总计
      return this.$store.getters["pjcart/countTotal"];
    },
    historylist() {
      return this.$store.state.medicinecard.historylist;
    },
  },
  created() {
    this.num = this.$route.params.categoryId;
    noScreenList(this.num).then(res=>{
       this.lists = res.data.data.products;
    })
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.oldUrl = from.path;
    });
  },
  methods: {
    handInt(priceInt) {
      return parseInt(priceInt) + ".";
    },
    linkToDetail(id) {
      this.$router.push("/children/detail/" + id);
    }, //跳转详情页
    handFloat(priceFloat) {
      let a = priceFloat * 100;
      let b = String(a).slice(-2);
      return b;
    },
    handSelect(index) {
      this.checknum = index;
      if (index == 0 || index == 1) {
        if(this.isScreen){
          noScreenList(this.num).then(res=>{
                  this.lists = res.data.data.products;
          })
        }else {
          screenList(this.$route.params.categoryId).then(res=>{
                this.lists = res.data.data.products;
              })
        }
      }
      if (index == 2) {
        this.pricecount = !this.pricecount;
        let number = this.pricecount ? "Y" : "N"; //价格升序 和降序排列
        if(this.isScreen){
          noRankList(this.num,number).then(res=>{
                  this.lists = res.data.data.products;
          })
        }else {
          rankList(this.$route.params.categoryId,number).then(res=>{
                this.lists = res.data.data.products;
              })
        }
      }
    },
    historyAdd() {
      //搜索  并且添加历史记录
      //点击搜索或者取消
      if (this.intmsg) {
        this.$store.commit("medicinecard/initSearchKey", this.intmsg);
        this.$router.push("/search");
      }
      if (this.historylist) {
        for (let i = 0; i < this.historylist.length; i++) {
          if (this.historylist[i] == this.intmsg) {
            //有相同数据
            return false;
          }
        }
        // 没有相同数据时
        if (this.intmsg) {
          //有关键词时
          this.$store.commit("medicinecard/historyAdd", this.intmsg); //触发store状态机的mutations  commit固定写法
          localStorage.setItem("historylist", JSON.stringify(this.historylist));
          // this.$router.push('/search');
        } else {
          this.isSearch = true;
          this.$router.push(`${this.oldUrl}`);
        }
      }
    },
    handleCartAdd(good) {
      //商品加入购物车
      if (this.$store.state.zlstore.userinfo) {
        let productObj = {
          cartAddVos: [{ productId: good.productId, quantity: 1 }],
          isBuy: false,
        };
        cartAdd(productObj).then((res) => {
          ownCartList().then((res) => {
            this.$toast.success("已加入购物车成功");
            //发起请求购物车里面的商品列表
            if(res.data.supplierList){
              var supplierList = res.data.supplierList;
            }
            this.$store.commit("pjcart/initSupplierList", supplierList);
          });
        });
      }else {
        this.$toast.fail("请登录");
      }
    },
    handleScreen(){//点击筛选药神卡
        this.checknum=0;
          this.isScreen=!this.isScreen;
          if(this.isScreen){//未点击筛选
              noScreenList(this.num).then(res=>{
                  this.lists = res.data.data.products;
              })
          }else{//点击筛选
              screenList(this.$route.params.categoryId).then(res=>{
                this.lists = res.data.data.products;
              })
          }
    }
  },
};
</script>
<style lang="less" scoped>
</style>
<style scoped>
.product-img[data-v-4fc4293a] {
  width: 350px;
  height: 350px;
  position: relative;
}
.product-img img[data-v-4fc4293a] {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px 10px 0 0;
}
.product-list_item[data-v-4fc4293a] {
  width: 350px;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  border-radius: 10px;
  background: #fff;
}
.product-name[data-v-4fc4293a] {
  width: 100%;
  height: 85px;
  margin-bottom: 8px;
  font-weight: 400;
  color: #333;
}
.product-info[data-v-4fc4293a] {
  width: 100%;
  padding: 10px 20px 18px;
}
.product-price-left[data-v-4fc4293a],
.product-price[data-v-4fc4293a] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.product-price[data-v-4fc4293a] {
  height: 48px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-top: 10px;
}
</style>